<template>
  <div>
    <el-dialog title="答卷信息" :visible.sync="isshow" width="800px">
      <div ref="printAnswer">
        <div class="toptitle">
          <div>序号：{{ index }}</div>
          <div>填写时间：{{ survey.createTime }}</div>
        </div>

        <div
          v-for="(item, index) in survey.questionList"
          :key="index"
          class="questionitem"
        >
          <!-- 问题 -->
          <div :class="item.requiredFlag == 1 ? 'required title' : 'title'">
            <div>{{ index + 1 }}、</div>
            <div v-html="item.questionName"></div>
            <div style="min-width: 80px;white-space: nowrap;" >【{{ typeList[item.questionType - 1] }}】</div>
          </div>
          <!-- 答案 -->
          <div style="margin-top: 10px" v-if="item.questionType == 2">
            <template v-for="(key,i) of Object.keys(item.answerMap)">
              {{ item.answerMap[key].optionName }}
              <template v-if="item.answerMap[key].answerContent">
                〖{{
                item.answerMap[key].answerContent
              }}〗
              </template>
              <template v-if="i!=Object.keys(item.answerMap).length-1">┋</template>
            </template>
          </div>
          <div style="margin-top: 10px" v-if="item.questionType == 3">
            <template v-for="key of Object.keys(item.answerMap)">
              <template
                v-for="(e,i) of JSON.parse(item.answerMap[key].answerContent)"
              >
                〖 {{ e }}〗
                <template v-if="i!=JSON.parse(item.answerMap[key].answerContent).length-1">┋</template>
              </template>
            </template>
          </div>
          <div
            style="margin-top: 10px"
            v-if="item.questionType == 4"
          >
            <template v-for="key of Object.keys(item.answerMap)">
              {{
                item.answerMap[key].answerContent
              }}
            </template>
          </div>
          <div
            style="margin-top: 10px"
            v-if="item.questionType == 1"
          >
            <template v-for="key of Object.keys(item.answerMap)">
              {{ item.answerMap[key].optionName }}
              <template v-if="item.answerMap[key].answerContent">
                〖{{
                item.answerMap[key].answerContent
              }}〗
              </template>
            </template>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printAnswer">打印</el-button>
        <el-button type="primary" @click="loadSurvey">下载</el-button>
        <el-button type="primary" @click="isshow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAnswerMsg, exportSurvey } from "../../../api/questions/statistics";
export default {
  name: "MixedStateAdminAnswerMsg",

  data() {
    return {
      isshow: false,
      index: "1",
      id: "",
      survey: {
        id: 1,
        addtime: "2013-11-14 16:21:23",
        usetime: "121秒",
        questionList: [
          
        ],
      },
      typeList: ["单选题", "多选题", "填空题", "简答题"],
    };
  },

  mounted() {},

  methods: {
    show(id, index) {
      this.id = id;
      this.index = index + 1;
      this.getList();
      this.isshow = true;
    },
    getList() {
      // 使用id获取后端数据
      getAnswerMsg({ surveyUserId: this.id }).then((res) => {
        this.survey = res.data;
      });
    },
    // 打印答卷信息
    printAnswer() {
      this.$html2canvas(this.$refs.printAnswer, {
        backgroundColor: "white",
        useCORS: true,
        foreignObjectRendering: false,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
      }).then((canvas) => {
        const url = canvas.toDataURL();
        this.img = url;
        this.$print({
          printable: url,
          type: "image",
          documentTitle: "--",
          base64: "true",
        });
      });
    },
    // 问卷下载
    loadSurvey() {
      exportSurvey({ surveyUserId: this.id, answerNo: this.index }).then(
        (res) => {
          const blob = new Blob([res], { type: "" });
          let fileName = "答卷.docx";
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.download = fileName;
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
          } else {
            navigator.msSaveBlob(blob.fileName);
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.toptitle {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background-color: #fafbfc;
  border-bottom: 2px solid #4c9ef3;
}
.changebtns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.questionitem {
  padding: 20px 0px;
  border-bottom: 1px dotted #ddd;
}
.title {
  display: flex;
  font-size: 18px;
  // font-weight: bold;
  align-items: center;
}
.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>